<script setup lang="ts">
import { onMounted, ref } from "vue";
import { invoke, convertFileSrc } from "@tauri-apps/api/tauri";
import { PaginationProps } from "tdesign-vue-next";
import { BrowseIcon } from "tdesign-icons-vue-next";

const imageAllList = ref<Array<string>>([]);
const imageList = ref<Array<string>>([]);
const isShowImageList = ref<Array<boolean>>([]);

async function greet() {
  isShowImageList.value = [];
  imageAllList.value = await invoke("get_images", {
    path: "C:\\Users\\A\\Pictures",
  });
  imageAllList.value = imageAllList.value.map((item) => {
    return convertFileSrc(item);
  });

  imageList.value = imageAllList.value.slice(0, pageSize.value);
  imageList.value.forEach(() => {
    isShowImageList.value.push(false);
  });
}

const open = (index: number) => {
  isShowImageList.value[index] = true;
};

// 分页
const current = ref(1);
const pageSize = ref(20);

const onChange: PaginationProps["onChange"] = (pageInfo) => {
  const start = (pageInfo.current - 1) * pageInfo.pageSize;
  const end = pageInfo.current * pageInfo.pageSize;
  imageList.value = imageAllList.value.slice(start, end);
  isShowImageList.value = [];
  imageList.value.forEach(() => {
    isShowImageList.value.push(false);
  });
};

// 图片展示
const showNum = ref(4)

onMounted(() => {
  greet();
});
</script>

<template>
  <div>
    <div style="display: flex; align-items: center; justify-content: space-between;">
      <p>
        图片路径: <br />
        C:\Users\A\Pictures\Camera Roll
      </p>
      <t-input-number min="1" max="10" v-model="showNum"></t-input-number>
    </div>
    
    <!-- <p v-for="item in imageList" :key="item">{{ item }}</p> -->
    <div class="content">
      <div class="img_view" :style="{
        gridTemplateColumns: `repeat(auto-fill, minmax(calc(100% / ${showNum + 1}), 1fr))`
      }">
        <div
          class="tdesign-demo-image-viewer__base"
          v-for="(item, index) in imageList"
          :key="item"
          :style="{
            height: `${100 / showNum}vh`
          }"
        >
          <t-image-viewer
            :images="imageList"
            v-model:visible="isShowImageList[index]"
            :default-index="index"
            :imageScale="{max: 24, min: 1, step: 1}"
          >
            <template #trigger>
              <div class="tdesign-demo-image-viewer__ui-image">
                <img
                  alt="test"
                  :src="item"
                  class="tdesign-demo-image-viewer__ui-image--img"
                />
                <div
                  class="tdesign-demo-image-viewer__ui-image--hover"
                  @click="open(index)"
                >
                  <span><BrowseIcon size="1.4em" /> 预览</span>
                </div>
              </div>
            </template>
          </t-image-viewer>
        </div>
      </div>
    </div>
    <t-pagination
      v-model="current"
      v-model:pageSize="pageSize"
      :total="imageAllList.length"
      show-jumper
      @change="onChange"
    />
  </div>
</template>

<style lang="scss" scoped>
.content {
  height: calc(100vh - 300px);
  .img_view {
    width: 100%;
    max-height: 100%;
    display: grid;
    overflow-x: hidden;
    grid-gap: 10px;
    transition: all 0.3s;
  }
}

.tdesign-demo-image-viewer__ui-image {
  width: 100%;
  height: 100%;
  display: inline-flex;
  position: relative;
  justify-content: center;
  align-items: center;
  border-radius: var(--td-radius-small);
  overflow: hidden;
}

.tdesign-demo-image-viewer__ui-image--hover {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  background-color: rgba(0, 0, 0, 0.6);
  color: var(--td-text-color-anti);
  line-height: 22px;
  transition: 0.2s;
}

.tdesign-demo-image-viewer__ui-image:hover
  .tdesign-demo-image-viewer__ui-image--hover {
  opacity: 1;
  cursor: pointer;
}

.tdesign-demo-image-viewer__ui-image--img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  cursor: pointer;
  position: absolute;
}

.tdesign-demo-image-viewer__ui-image--footer {
  padding: 0 16px;
  height: 56px;
  width: 100%;
  line-height: 56px;
  font-size: 16px;
  position: absolute;
  bottom: 0;
  color: var(--td-text-color-anti);
  background-image: linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.4) 0%,
    rgba(0, 0, 0, 0) 100%
  );
  display: flex;
  box-sizing: border-box;
}

.tdesign-demo-image-viewer__ui-image--title {
  flex: 1;
}

.tdesign-demo-popup__reference {
  margin-left: 16px;
}

.tdesign-demo-image-viewer__ui-image--icons .tdesign-demo-icon {
  cursor: pointer;
}

.tdesign-demo-image-viewer__base {
  width: 100%;
  border: 4px solid var(--td-bg-color-secondarycontainer);
  border-radius: var(--td-radius-medium);
  transition: all 0.3s;
  background-color: #f7f7f7;
}
</style>
